<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="dataBox" v-if="data.length>0">
			<view class="dataItem" v-for="(item,index) in data" :key="index" @click="$navto.navto('/packageB/post_info/post_info',{id:item.id})">
				<text class="title">{{item.title}}</text>
				<text class="time">{{item.create_time}}</text>
				<view class="viewBox">
					<image :src="baseurl+'association/icon9.png'" class="eye"></image>
					<text class="viewNum black">阅读：{{item.read_num}}</text>
					<image :src="baseurl+'association/vote.png'" class="vote"></image>
					<text class="viewNum black">点赞：{{item.like}}</text>
					<image :src="baseurl+'association/msg.png'" class="msg"></image>
					<text class="viewNum black">回复：{{item.comment}}</text>
				</view>
				<view class="btn" @click.stop="del(item.id)">
					删除
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<image :src="baseurl+'association/nopost.png'" class="nopost"></image>
			<text class="nopostTips">您还暂未发布</text>
			<view class="publisBtn" @click="$redirectTo('/packageB/association/association')">
				立即发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '我的帖子',
					bgColor: 'transparent',
					color: '#000',
				},
				success: false,
				data: '',
				page_no:1
			}
		},
		onLoad() {
			//查询我的帖子
			this.getDta();
		},
		onReachBottom() {
			console.log("加载更多");
			console.log("加载更多");
			this.page_no++;
			this.$request.get(`community/worksLists?page_no=${this.page_no}`).then(
				res => {
					this.dataArr.push(...res.data.data);
				})
		},
		methods: {
			getDta() {
				this.$request.get(`community/worksLists?page_no=${this.page_no}`).then(res => {
					console.log(res.data.data);
					this.data = res.data.data.list;
				})
			},
			del(id) {
				uni.showModal({
					title: '提示',
					content: '是否确定删除',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$request.post(`community/delArticle`, {
								id: id
							}).then(res => {
								this.$u.toast(res.data.msg);
								this.getDta();
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.noData {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.publisBtn {
			width: 360rpx;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			background-color: #4E97AD;
			border-radius: 47rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 85rpx;
		}

		.nopost {
			width: 76rpx;
			height: 72rpx;
			margin-top: 560rpx;
		}

		.nopostTips {
			text-align: center;
			width: 100%;
			color: #919191;
			margin-top: 70rpx;
		}
	}

	.viewBox {
		height: 20rpx;
		display: flex;
		align-items: center;
		margin-top: 28rpx;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
		}
	}

	.btn {
		position: absolute;
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #4E97AD;
		border-radius: 25rpx;
		color: #fff;
		right: 0rpx;
		bottom: 50rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.dataBox {
		width: 670rpx;
		height: 80vh;
		margin-left: 40rpx;
		margin-top: 250rpx;
		overflow-y: scroll;

		.dataItem {
			position: relative;
			width: 100%;
			height: 210rpx;
			border-bottom: 1rpx solid #000;
			margin-bottom: 60rpx;
			display: flex;
			flex-direction: column;

			.time {
				font-size: 20rpx;
				font-weight: 500;
				margin-top: 28rpx;
			}

			.title {
				width: 100%;
				font-size: 28rpx;
				font-weight: 700;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.pyh-nv-box {
		position: absolute !important;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: url('https://miantou.guguan.net/img/association/resultBg.jpg');
		background-size: 100% 100%;
		overflow-y: hidden;
	}
</style>